<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../node_modules/element-ui/lib/theme-chalk/index.css">
</head>
<body>
    <div id="app">
        <h1>{{name}}</h1>
        <el-input v-model="todo" placeholder="请输入内容"></el-input>
        <el-button type="primary" round @click='add'>提交</el-button>
        <el-card class="box-card">
          <div v-for="(o,index) in todoList" :key="index" class="text item">
            {{o }}
            <el-button 
              type="danger" 
              icon="el-icon-delete" 
              circle 
              @click='del(index)'></el-button>
          </div>
        </el-card>
    </div>
</body>
</html>
<script src="../node_modules/vue/dist/vue.js"></script>
<script src="../node_modules/element-ui/lib/index.js"></script>
<script>
    let str = localStorage.getItem('mytodolist');
    let vm = new Vue({
        el:'#app',
        data:{
            name:"珠峰",
            todo:'',
            todoList:str ? JSON.parse(str) : []
        },
        methods: {
          add(){
            this.todoList.unshift(this.todo);
            // 向localStoreage中存储值的时候只能存储字符串，若不是字符串 则会默认调用toString转成字符串
            localStorage.setItem('mytodolist',JSON.stringify(this.todoList))
            this.todo = '';
            
          },
          del(n){
            console.log(n)
            // this.todoList.pop()
            this.todoList.splice(n,1)
            localStorage.setItem('mytodolist',JSON.stringify(this.todoList))
          }
        },
    });
</script>